﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="zh-CN" ng-app="Training">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
        .main {
            width: 100%;
            height: 100%;
        }

        #A {    
            width: 100%;
            height: 300px;
            border: 2px solid red;
            margin-right: 10px;
            z-index:100;
        }

        .Abg {
            background-color: rgba(255,255,0,.3);
        }

        #B {
            width: 100%;
            height: 300px;
            border: 2px solid blue;
            margin-right: 10px;
        }

        .Bbg {
            background-color: rgba(127,255,170,.3);
        }

        #C {
            width: 22%;
            height: 300px;
            border: 2px solid rgb(139,0,139);
            margin-right: 10px;
        }

        .Cbg {
            background-color: rgba(147,112,219,.3);
        }

        #T {
            width: 22%;
            height: 300px;
            border: 1px solid black;
            margin-right: 10px;
        }

        .Tbg {
            background-color: rgba( 0,0,255,.5);
        }

        .alter {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background-color: rgba(0, 0, 0, .7);
            display: none;
        }

        .message {
            width: 80%;
            box-sizing: content-box;
            height: 250px;
            margin: 50px auto;
            border-radius: 5px;
            overflow: auto;
        }

        .content {
            font-family: Arial;
            font-size: 14px;
            margin: 30px auto;
            width: 90%;
            line-height: 30px;
        }

        .Atip {
            background-color: rgba(255,255,0,.6);
            color: white;
        }

        .Btip {
            background-color: rgba(127,255,170,.6);
            color: white;
        }

        .Ctip {
            background-color: rgba(147,112,219,.6);
            color: white;
        }

        .Ttip {
            background-color: rgba( 0,0,255,.6);
            color: white;
        }
        .area {
            width:100%;
            height:100%;
            background-size:auto;
            background-image:url('../../Assets/Emergency/img/mpvgmap.jpg');
            background-repeat:no-repeat;
        }
    </style>
</head>
<body ng-controller="TraingingController">
    <div class="main" ng-init="Area='@(Request.QueryString["Area"].IsEmpty() ? "N" : Request.QueryString["Area"])';InitPage(Area);">
        <div class="alter" ng-click="HideTip();">
            <div class="message Atip" id="ATip" ng-show="Area=='A'">
                <p class="content">
                    进入A区办公区<br />
                    参加会议或活动，请在前台做好登记<br />
                    进入办公楼请保持安静，请勿大声喧哗、追逐打闹<br />
                    请勿进入与本次来访无关的办公室、会议室、实验室等区域<br />
                    请勿随意翻阅办公区域资料、文件<br />
                    请勿在公共场所探讨、交流来访工作或其他公司内部信息<br />
                    祝您来访顺利<br />
                </p>
            </div>
            <div class="message Btip" id="BTip" ng-show="Area=='B'">
                <p class="content">
                    进入B区零件/工装加工区<br />
                    进入零件/工装加工区，请遵守车间内各类安全警示标识要求，<br />
                    遵从相关人员引导，在安全通道内行走，<br />
                    请勿穿裙子、短裤、高跟鞋、拖鞋进入作业区域。<br />
                    如需进入生产作业区域，请按要求佩戴相应安全防护用品。<br />
                    未经许可，严禁触碰任何设施设备、产品，<br />
                    严禁进入与业务无关的区域。<br />
                    请注意脚下安全，不得在车间内追逐打闹<br />
                    留意场内物流车辆的动向和灯光鸣笛等信号示意，注意避让<br />
                    祝您来访顺利
                </p>
            </div>
            <div class="message Ctip" id="CTip" ng-show="Area=='C'">
                <p class="content">
                    请遵从相关人员引导，在安全通道内行走<br />
                    未经许可，请勿进入生产作业区域。<br />
                    请勿穿裙子、短裤、高跟鞋、拖鞋进入生产作业区域<br />
                    请勿跨越警示带或护栏，请勿触碰任何设施设备和产品<br />
                    严禁进入吊装、危险作业等区域<br />
                    留意场内物流车辆的动向和灯光鸣笛等信号示意，注意避让<br />
                    如需进入生产作业区域，请按要求佩戴相应安全防护用品<br />
                    如需登机，应办理相关手续，经确认后，在对接部门陪同下，进行登机前安全检查，<br />
                    并由相关人员核实确认<br />
                    未经允许禁止摄影或摄像<br />
                    离开前，请确认所有物品齐全且全部带离<br />
                    祝您来访顺利<br />
                </p>
            </div>
            <div class="message Ttip" id="TTip" ng-show="Area=='T'">
                <p class="content">
                    严禁携带易燃易爆物品<br />
                    进入工作现场时，应由对接部门人员陪同，办理相关手续<br />
                    如需登机作业，请佩戴好工作证，填写《机上操作检查登记表》或《机上工作记录单》<br />
                    经确认后，在对接部门陪同下，进行登机前安全检查，并由相关人员核实确认<br />
                    未经允许，禁止摄影或摄像。<br />
                    离开前，请确认所有物品齐全且全部带离。<br />
                    请将执行工作时打开的舱门/口盖关闭，将所有借用的工具归还，梯架放回原位<br />
                    祝您来访顺利<br />
                </p>
            </div>
        </div>
        <div class="area">
            <div id="A" ng-click="ShowTip('A');">
                A
            </div>
            <div id="B" ng-click="ShowTip('B');">
                B
            </div>
            <div id="C" ng-click="ShowTip('C');">
                C
            </div>
            <div id="T" ng-click="ShowTip('T');">
                T
            </div>
        </div>
       
    </div>


    <script src="~/Assets/Scripts/base/angular.js"></script>
    <script type="text/javascript" src="~/Assets/DashBoard/js/jquery.min.js"></script>

    <script>
        var app = angular.module('Training', []);
        app.controller("TraingingController", function ($scope, $http, $window, $filter, $interval, $compile) {
            $scope.InitPage = function () {

            }

            $scope.ShowTip = function (Type) {
                $(".alter").css("display", "block");
                $scope.Area = Type;
                $("#A").removeClass("Abg");
                $("#B").removeClass("Bbg");
                $("#C").removeClass("Cbg");
                $("#T").removeClass("Tbg");

                $("#" + Type).addClass(Type + "bg");
            }

            $scope.HideTip = function () {
                $(".alter").css("display", "none");
            }
        });

    </script>
</body>
</html>
